<template>
  <div class="home">
    <!-- 顶部按钮容器 -->
    <div class="top-buttons-container" :style="{ backgroundColor: topButtonsContainerColor, marginLeft: topButtonsContainerMargin }">
      <button @click="goToHomePage" class="top-button" :style="{ backgroundColor: topButtonColor, color: 'black', borderRadius: '20px' }">首页</button>
      <button @click="goToTemplateSelection" class="top-button" :style="{ backgroundColor: topButtonColor, color: 'black', borderRadius: '20px' }">模版选择</button>
      <button @click="goToOtherIssues" class="top-button" :style="{ backgroundColor: topButtonColor, color: 'black', borderRadius: '20px' }">其它问题</button>
    </div>
    <!-- 添加功能入口按钮 -->
    <div class="buttons">
      <!-- 编辑简历按钮 -->
      <div @click="goToProfileForm" class="profile-box">
        <div class="plus-sign"></div>
        <button class="edit-button" @click="goToProfileForm">编辑简历</button>
      </div>
      <!-- 在这里添加其他功能按钮 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定义按钮颜色
      topButtonColor: '#79caaab',
      topButtonsContainerColor: '#cce0cd', // 修改容器颜色为绿色
      topButtonsContainerMargin: '80px 0 0 100px', // 向右移动
    };
  },
  methods: {
    goToHomePage() {
      // 在这里实现跳转到首页的逻辑
      this.$router.push('/'); // 使用 Vue Router 实现路由跳转到首页
    },
    goToTemplateSelection() {
      // 在这里实现跳转到模版选择页面的逻辑
      this.$router.push('/template-selection'); // 使用 Vue Router 实现路由跳转到模版选择页面
    },
    goToOtherIssues() {
      // 在这里实现跳转到其它问题页面的逻辑
      this.$router.push('/other-issues'); // 使用 Vue Router 实现路由跳转到其它问题页面
    },
    goToProfileForm() {
      // 在这里实现跳转到编辑简历页面的逻辑
      this.$router.push('/profile'); // 使用 Vue Router 实现路由跳转到编辑简历页面
    }
  }
};
</script>

<style>
/* 设置背景图并根据页面大小调整 */
.home {
  background-image: url('a.png'); /* 设置背景图片 */
  background-size: cover; /* 背景图片覆盖整个容器 */
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat; /* 背景图片不重复 */
  min-height: 100vh; /* 最小高度设置为视口高度 */
}

.top-buttons-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
}

.top-button {
  padding: 10px 20px;
  margin-right: 50px; /* 加宽按钮之间的距离 */
  border: none;
  cursor: pointer;
}

.profile-box {
  width: 250px;
  height: 350px;
  background-color: #f9f9f9da; /* 设置背景色为浅灰色 */
  cursor: pointer;
  position: relative; /* 使内部元素定位相对于父容器 */
  margin-top: 50px; /* 向下移动 */
  margin-left: 100px; /* 向右移动 */
  border: none; /* 移除按钮的边框 */
  border-radius: 20px; /* 设置按钮的圆角 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 内部的加号图标 */
.plus-sign {
  width: 20px; /* 设置加号图标的大小 */
  height: 2px; /* 设置加号图标的粗细 */
  background-color: white; /* 设置加号图标的颜色为白色 */
}

/* 编辑按钮样式 */
.edit-button {
  margin-top: 10px;
  padding: 8px 16px;
  background-color: #79caaab; /* 设置按钮的背景色 */
  color: black; /* 设置按钮文字颜色 */
  border: none; /* 移除按钮的边框 */
  border-radius: 20px; /* 设（）置按钮的圆角 */
  cursor: pointer; /* 设置鼠标悬停样式为手型 */
}

/* 鼠标悬停时修改编辑按钮的背景色 */
.edit-button:hover {
  background-color: #60a993; /* 设置鼠标悬停时的背景色为深绿色 */
}
</style>
